<template>
    <div class="pb-30">
        <div class="clearfix">
            <h3 class="fl">基本信息</h3>
            <div class="fr">
                <router-link :to="`/project/rewardedit?id=${this.$route.query.id}`"><el-button type="primary">编辑</el-button></router-link>
                <el-button @click="back">返回</router-link></el-button>
            </div>
        </div>
        <div class="mt-20">
            <el-row>
                <el-col :span = "8">
                    悬赏名称：{{data.name}}
                </el-col>
                <el-col :span = "8">
                    赏金: {{data.bounty}}
                </el-col>
                <el-col :span = "8">
                    周期: {{data.expectedDuration}}
                </el-col>
            </el-row>
            <el-row class="mt-15">
                技能要求：<span v-for = "item in data.skillList" class="mr-10">{{item.skill}}</span>
            </el-row>
        </div>
        <div class="mt-20">
            <h3>需求描述</h3>
            <p class="mt-15 font-12 color03" v-html="data.prd">
            </p>
            <div class="mt-15">
                <span>附件：</span>
                <a download v-for="item in data.attachmentList" href="item.path">
                    <span>{{item.name}}</span>
                </a>
            </div>
        </div>
        <div class="mt-20 pb-50">
            <h3 >联系信息</h3>
            <el-row class="mt-15">
                <el-col :span="8"><span>联系人：</span>{{data.contact.linkman}}</el-col>
                <el-col :span="8"><span>联系电话：</span>{{data.contact.mobile}}</el-col>
                <el-col :span="8"><span>电子邮箱：</span>{{data.contact.email}}</el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import {getRewardDetail} from '@/api/reward.js'
export default{
    created () {
        let req = {
            id: this.$route.query.id
        }
        getRewardDetail(req).then(data => {
            this.data = data.data.data
        })
    },
    data () {
        return {
            // 详情数据对象
            data: {
                name: '',
                bounty: '',
                expectedDuration: '',
                skillList: '',
                attachmentList: [],
                contact: {
                    linkman: '',
                    mobile: '',
                    email: ''
                }
            }
        }
    },
    methods: {
        // 返回
        back () {
            history.back()
        }
    }
}
</script>
<style>
    .pb-50{
        padding-bottom:50px;
    }
</style>
